<template>
  <el-container>
    <el-header class="searchPageHeader">
      <el-page-header @back="goBack" content="搜索页面">
      </el-page-header>
    </el-header>

    <el-main>
      <el-tabs v-loading="loading" v-model="activeName" class="searchPageTabs">
        <el-tab-pane label="帖子" name="post">
          <div class="post-list">
            <el-card v-for="post in this.showData.posts" :key="post.postId" @click.native="goToPost(post.postId)"
              class="post-card">
              <div class="post-title">{{ post.title }}</div>
              <div class="post-info">
                <span class="post-category">{{ post.module }}</span>
                <span class="post-date">{{ post.postTime }}</span>
              </div>
              <div class="post-summary">{{ post.content }}</div>
            </el-card>
          </div>
        </el-tab-pane>

        <el-tab-pane label="用户" name="user">
          <div class="user-list">
            <el-card v-for="post in this.showData.user" :key="post.postId" @click.native="goToPost(post.postId)"
              class="post-card">
              <div class="post-title">{{ post.title }}</div>
              <div class="post-info">
                <span class="post-category">{{ post.module }}</span>
                <span class="post-date">{{ post.postTime }}</span>
              </div>
              <div class="post-summary">{{ post.content }}</div>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>

  </el-container>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      activeName: 'post',
      showData: {
        posts: [],
        user: []
      },
      loading: true
    };
  }, async created() {
    this.value = this.$route.params.value;
    this.backPage = this.$route.params.backPage;
    this.userId = this.$route.params.userId;
    this.userName = this.$route.params.userName;
    await this.$axios.get('https://localhost:44300/api/Post/keyWordSelect', {
      params: {
        keyWord: this.value
      }
    }).then(response => {
      this.showData.posts = response.data.response;
    })
      .catch(error => {
        console.error(error);
      });

    await this.$axios.get('https://localhost:44300/api/Post/PosterSelect', {
      params: {
        poster: this.value
      }
    }).then(response => {
      this.showData.user = response.data.response;
      this.loading = false
    })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    goBack() {
      this.$router.push({ name: this.backPage, params: { userId: this.userId, userName: this.userName } })
    },
    goToPostPage() {
      this.$router.push("/postPage")
    },
    goToUserInformation() {
      this.$router.push("/userInformation")
    },
    goToSearchPage() {
      if (this.searchValue.trim() === '') {
        // 如果搜索框为空则不跳转到搜索页面
        return;
      }
      this.$router.push('/searchPage')
      // 根据 this.searchValue 进行搜索
    },
  }
};
</script>

<style>
.searchPageHeader {
  padding: 16px;
}

.el-main {
  padding: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  margin: auto;
}

.header-left {
  display: flex;
  align-items: center;

}

.dropdown {
  margin-right: 20px;
}

.selectBtn {
  width: 100px;
}

.input {
  width: 350px;
  margin-right: 10px;
}

.post-card {
  width: 80%;
  margin-bottom: 16px;
  cursor: pointer;
}

.post-title {
  font-size: 24px;
  margin-bottom: 8px;
}

.post-info {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.post-category {
  margin-right: 8px;
}

.post-summary {
  font-size: 16px;
  line-height: 1.5;
}

.user-list {
  display: flex;
  flex-wrap: wrap;
}

.user-card {
  width: 200px;
  margin: 16px;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 8px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-size: 18px;
}

.user-intro {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
}
</style>